<template>
  <view class="flex justify-between items-center">
    <view class="flex justify-between items-center gap-[18rpx]">
      <view
        class="rounded-full size-[70rpx] flex justify-center items-center"
        :style="{ backgroundColor: bussinessListArry[data.type].color }"
      >
        <image :src="bussinessListArry[data.type].img" class="size-[34rpx]" />
      </view>
      <view>
        <view class="font-500 text-size-2 mb-1">
          销售订单：{{ data.order }}
        </view>
        <view class="color-text-2 text-size-1 font-400">
          {{ data.time }}
        </view>
      </view>
    </view>
    <view class="flex justify-right items-center gap-[18rpx]">
      <view class="mb-1 flex flex-col gap-1 justify-center items-center">
        <GsMoney
          :money="data.price"
          moneyUnitSize="26rpx"
          :showUnitIcon="true"
          moneySize="26rpx"
        ></GsMoney>
        <GsMoney
          :money="data.nowPrice"
          moneySize="22rpx"
          :color="`#86909C`"
        ></GsMoney>
      </view>
      <image src="/static/images/icon/right.png" class="size-[40rpx]" />
    </view>
  </view>
</template>

<script setup>
import GsMoney from "@/components/GsMoney/index.vue";
import { BUSINESS_TYPE, convertDictByField } from "@/utils/dict";
const bussinessListArry = convertDictByField(BUSINESS_TYPE, "value");
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["click"]);
const handleClick = () => {
  emit("click", props.data.id);
};
</script>

<style lang="scss" scoped></style>
